<script setup>
import {onMounted, ref} from "vue";
import {getInfoIndexVDO, updateInfo} from "../../../http/blog/info.js";

const indexVDO = ref({
  info: {
    name: "",
    logo: "",
    theme: "",
    description: "",
    status: "enable",
    sort: "0",
  },
  themeList: [],
})

function handleInfoSave(){
  updateInfo(indexVDO.value.info).then(response => {
    handleIndexVDO()
  })
}


function handleIndexVDO(){
  getInfoIndexVDO().then(response => {
    indexVDO.value = response.data
  })
}

onMounted(() => {
  handleIndexVDO()
})


</script>

<template>
  <div style="display: flex; flex-flow: column nowrap; flex: auto; height: 100%; overflow: hidden; padding-left: 5px; padding-right: 5px">
    <div style="display: flex; width: 100%; height: 100%; overflow: auto; padding-top: 10px">
      <el-form ref="blogInfoForm" :model="indexVDO.info" label-width="180px" style="width: 1000px">
        <el-form-item label="名称">
          <el-input v-model="indexVDO.info.name"></el-input>
        </el-form-item>
        <el-form-item label="简介">
          <el-input v-model="indexVDO.info.description" type="textarea"></el-input>
        </el-form-item>
        <el-form-item label="主题">
          <el-select v-model="indexVDO.info.theme">
            <el-option
                v-for="item in indexVDO.themeList"
                :key="item.code"
                :label="item.name"
                :value="item.code">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleInfoSave">Save</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>

</template>

<style scoped>

</style>